<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../../../../Themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../../../Themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../../../CSS/demo.css">
		<link rel="stylesheet" type="text/css" href="../../../../CSS/common.css">
		<script type="text/javascript" src="../../../../JS/common.js"></script>
		<script type="text/javascript" src="../../../../JS/jquery.min.js"></script>
		<script type="text/javascript" src="../../../../JS/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../../../../JS/map.js"></script>
		<style>
			.right_postion {
				position: absolute;
				left: 750px;
				color: blue;
				font-weight: 300;
			}
			
			.left_postion {
				position: absolute;
				left: 40px;
				color: blue;
				font-weight: 300;
			}
			
			#maptitle {
				color: blue;
				font-weight: 600;
				font-size: 15px;
				margin-left: 340px;
				margin-top: 50px;
			}
		</style>
	</head>

	<body style="height: 100%;">
		<div style="text-align: left; ">
			<p id="maptitle"></p>
			<div id="left_top" class="left_postion"></div>
			<div id="right_top" class="right_postion"></div>
			<img id="img" src="../../../../images/map/map-3-2/河边7-22.jpg" usemap="#13" style="border-style:none;width: 812px;height: 507px;position: absolute;" />
			<map id="13" name="13">
				<area shape="poly" coords="55,203,82,204,82,254,54,255" href="#" id="area7" />
				<area shape="poly" coords="88,204,113,205,116,254,88,254" href="#" id="area8" />
				<area shape="poly" coords="121,204,145,204,148,255,123,252" href="#" id="area9" />
				<area shape="poly" coords="151,202,175,203,173,257,151,255" href="#" id="area10" />
			</map>
			<div id="left_bottom" class="left_postion"></div>
			<div id="right_bottom" class="right_postion"></div>
		</div>
	</body>
	<script type="text/javascript">
		var _left_top_num = 0;
		var _left_bottom_num = 0;
		var _right_top_num = 0;
		var _right_bottom_num = 0;
		var _tmp = "13";

		//		getTipNum();
		var rightAreaData = new Object();
		rightAreaData.len = 12; //摊位个数
		rightAreaData.x1 = 593; //第一排最后一个矩形左上角x坐标
		rightAreaData.y1 = 202; //第一排最后一个矩形左上角y坐标
		rightAreaData.x2 = 616; //第一排最后一个矩形右下角x坐标
		rightAreaData.y2 = 257; //第一排最后一个矩形右下角y坐标
		rightAreaData.offset = 33; //hover之间的间隔
		rightAreaData.type = "horizontal"; //水平方向
		rightAreaData.firstnum = 22; //摊位标号

		var _rightData = CreateAreaData(rightAreaData);
		var areacontent = CreateAreaHTML(_rightData);
		$("#13").append(areacontent);
		modiAreaTitle();

		function CreateAreaData(_data) {
			var _areaData = new Array();
			for(var i = 1; i <= _data.len; i++) {
				_areaData[i] = new Object();
				if(_data.type = "vertical") {
					_areaData[i].x1 = _data.x1;
					_areaData[i].y1 = _data.y1 - _data.offset * (i - 1);
					_areaData[i].x2 = _data.x2;
					_areaData[i].y2 = _data.y2 - _data.offset * (i - 1);
				}
				if(_data.type = "horizontal") {
					_areaData[i].x1 = _data.x1 - _data.offset * (i - 1);
					_areaData[i].y1 = _data.y1;
					_areaData[i].x2 = _data.x2 - _data.offset * (i - 1);
					_areaData[i].y2 = _data.y2;

				}
				_areaData[i].id = "area" + (_data.firstnum --);
				_areaData[i].location = _data.location;
			}
			return _areaData;
		}
		
		function modiAreaTitle() {
			for(var i = 22; i < 23; i++) {
				var _id = "area" + i;
				var _plocation = getLocation(i);
				console.log(_plocation);
				document.getElementById(_id).setAttribute("title", _plocation);
			}

		}
		
		//		function getTipNum() {
		//			console.log("开始执行!");
		//			var bh = parseInt(_tmp.substring(0, 1));
		//			_left_bottom_num = (bh - 1) * 40 + 20;
		//			_right_bottom_num = (bh - 1) * 40 + 1;
		//			_left_top_num = (bh - 1) * 40 + 40;
		//			_right_top_num = (bh - 1) * 40 + 21;
		//			$("#left_bottom").html(_left_bottom_num);
		//			$("#right_bottom").html(_right_bottom_num);
		//			$("#left_top").html(_left_top_num);
		//			$("#right_top").html(_right_top_num);
		//			$("#maptitle").html("蔬菜批发区" + bh + "号大棚");
		//
		//		}

		function getLocation(_num) {
			var bh = _tmp.substring(0, 1);
			console.log(bh);
			var boost_num = (parseInt(bh) - 1) * 40 + _num;
			var _location = "水果批发区" + _tmp + "门牌号" + boost_num;
			return _location;
		}
		
		$(function() {
			$("area").each(function(index, element) {
				showTips($(this), $(this).attr("id"));
			});
		});
		////查看商铺的详细信息
		function BoostDetail() {
			console.log("查看商铺详细信息");
		}
	</script>

</html>